<template>
  <section class="ling-top-text improvement_personal">
    <h2>完善资料</h2>
    <div
      class="improvement_personal_detail"
      v-if="companyUserDetail.zbCompanyResponse || companyUserDetail.userDetailResponse"
    >
      <div class="improvement_personal_items">
        <van-field
          v-model="companyUserDetail.zbCompanyResponse.name"
          required
          clearable
          label="企业名称"
          placeholder="请填写企业名称"
          name="companyName"
          v-validate="'required'"
          maxlength="20"
          :error="errors.has('companyName')"
        />
      </div>
      <div class="improvement_personal_items">
        <van-field
          v-model="companyUserDetail.zbCompanyResponse.contactName"
          required
          clearable
          label="企业联系人"
          placeholder="请填写企业联系人"
          name="contactPerson"
          v-validate="'required'"
          maxlength="10"
          :error="errors.has('contactPerson')"
        />
      </div>
      <div class="improvement_personal_items">
        <van-field
          v-model="companyUserDetail.zbCompanyResponse.emailAddress"
          required
          clearable
          label="企业邮箱"
          placeholder="请填写企业邮箱"
          name="email"
          v-validate="'required|email'"
          :error="errors.has('email')"
        />
      </div>
      <div class="improvement_personal_items">
        <van-field
          v-model="companyUserDetail.userDetailResponse.mobile"
          required
          clearable
          result-type="file"
          label="联系人手机号"
          placeholder="请填写手机号"
          name="mobile"
          disabled
          v-validate="'required|mobile'"
          maxlength="11"
          :error="errors.has('mobile')"
        />
      </div>
      <div class="improvement_personal_items">
        <div class="uploader ling-flex">
          <span>营业执照</span>
          <van-uploader :after-read="afterRead">
            <i>
              {{
              companyUserDetail.zbCompanyResponse.businessLicenseUrl
              ? '修改'
              : '上传'
              }}
            </i>
          </van-uploader>
        </div>
      </div>
      <div class="img-box" @click="show = true">
        <img width="100" :src="companyUserDetail.zbCompanyResponse.businessLicenseUrl" alt />
      </div>
      
      <div class="ling-linearButton improvement_btn" @click="handleSubmit">提交</div>
    </div>
    <van-popup v-model="show" v-if="companyUserDetail.zbCompanyResponse" closeable>
      <div class="business_license">
        <img :src="companyUserDetail.zbCompanyResponse.businessLicenseUrl" alt />
      </div>
    </van-popup>
  </section>
</template>

<script>
import { uploadToQiniu } from '@/utils/qiniuUpload'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('myData')
export default {
  name: 'improvementCompanyPage',
  data() {
    return {
      show: false,
      isLeave: false,
    }
  },
  components: {},
  computed: {
    ...mapState(['company']),
    companyUserDetail: {
      get() {
        return this.$store.state.myData.companyUserDetail
      },
      set(value) {
        this.$store.commit('myData/setCompanyUserDetail', value)
      },
    },
  },
  async created() {
    await this.getCompanyUserDetail()
  },
  methods: {
    ...mapActions(['editCompany', 'getCompanyUserDetail']),
    handleSubmit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.$dialog
            .confirm({
              title: '修改资料需要重新审核',
              message: '是否确认提交？',
            })
            .then(() => {
              const {
                userDetailResponse,
                zbCompanyResponse,
              } = this.companyUserDetail
              const params = {
                name: zbCompanyResponse.name,
                contactName: zbCompanyResponse.name,
                emailAddress: zbCompanyResponse.emailAddress,
                businessLicenseUrl: zbCompanyResponse.businessLicenseUrl,
              }
              this.editCompany(params).then((res) => {
                this.isLeave = true
                this.$router.go(-1)
              })
            })
        }
      })
    },

    afterRead(file) {
      uploadToQiniu(file.file, () => {})
        .then((response) => {
          this.companyUserDetail.zbCompanyResponse.businessLicenseUrl = response
        })
        .catch((e) => {
          console.log(e, 'catch')
        })
    },
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 该页面不可返回上一个页面，但是可以通过触发handleSubmit方法返回
    if (from.path == '/improvementCompany' && !this.isLeave) {
      next(false)
    } else {
      next()
    }
  },
}
</script>

<style lang="less" scoped>
.improvement_personal {
  .improvement_personal_detail {
    padding-left: 20px;
    position: relative;
    .improvement_personal_items {
      border-bottom: solid 1px #dddddd;
      margin-top: 5px;
      position: relative;
      .uploader {
        line-height: 45px;
        padding: 0 15px;
        input {
          width: 40px;
          height: 26px;
          opacity: 0;
          z-index: 1;
          position: absolute;
          right: 10px;
          overflow: hidden;
        }
        span {
          color: #323233;
          font-size: 14px;
        }
        span::before {
          content: '*';
          position: absolute;
          left: 7px;
          font-size: 14px;
          color: #f44;
        }
        i {
          font-size: 10px;
          color: #7ac5ef;
          font-style: normal;
          z-index: 0;
        }
      }
    }
    .img-box {
      width: 100px;
      height: 60px;
      margin-top: 20px;
      background-size: cover;
      overflow: hidden;
    }
  }
  .business_license {
    background: white;
    text-align: center;
  }
}
</style>

<style lang="less">
.improvement_personal {
  .van-field__control {
    text-align: right;
  }
  .van-overlay {
    background: rgba(0, 0, 0, 0.9);
  }
  .van-popup {
    max-height: 70%;
  }
}
</style>
